<template>
	<section>
		<!--start  面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>客户</el-breadcrumb-item>
				<el-breadcrumb-item>客户反馈</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--start content-->
		<div class="content" id="content">
			<!--反馈详情-->
			<div class="add">
				<transition name="fade">
					<div class="modal-backdrop" v-show="add"></div>
				</transition>
				<transition name="slideDown">
					<div class="specific-search" v-show="add">
						<div class="search-title">
							<p>反馈详情</p>
						</div>
						<div class="gankua">
							<img src="../../../assets/img/touxiang.png"></img>
							<span>名字</span>
							<span>时间</span>
							<em class="iconfont" @click="Delete">&#xec50;</em>
							<p>内容</p>
						</div>
						<div class="search-btn">
							<el-button @click="addCancel" type="primary">返回</el-button>
							
						</div>
					</div>
				</transition>
			</div>
			<!---->
			<div class="public-th clearfix">
				<div class="public-left clearfix">
					<div class="public-left clearfix">
						<div class="fanhuitime">
							<template>
							  <div class="blocktime">
							    <el-date-picker
							      v-model="value6"
							      type="daterange"
							      placeholder="选择日期范围">
							    </el-date-picker>
							  </div>
							</template>
						</div>
						
						<div class="goods-input">
							<input @keydown.enter="Query" type="text" v-model="jiaojian" placeholder="请输入客户名称/客户编码/联系方式" /><i @click="Query"></i>
						</div>
					</div>
				</div>
			</div>
			<div class="table contentBodyCon kehutable" :class="{beforeNone:tableData.length!='0'}" id="table">
				<el-table  ref="multipleTable" :data="tableData" style="width: 100%;  z-index: 10;"  :max-height="tableH" >
					<el-table-column prop="memberName" label="会员名称" width="350"  to="/modifykehu">
						
					</el-table-column>
					<el-table-column prop="gradeName" label="反馈内容" width="650">
						<template scope="scope">
                        	<p class="pkehuName">
								<span @click="gaojisousu" v-html="scope.row.gradeName"></span>
							</p>
						</template>
					</el-table-column>
					<el-table-column prop="createDateStr" label="创建时间" > </el-table-column>
					<el-table-column prop="" label="" fixed="right" width="60" >
						<template scope="scope">
							<el-popover trigger="hover" placement="bottom">
								<p class="p" style="cursor: pointer;" @click="Delete(scope.$index, tableData)"><em class="iconfont">&#xe644;</em>作废</p>
								<div slot="reference" class="name-wrapper" style="text-align: center;">
									<em class="iconfont tab-hover">&#xe607;</em>
								</div>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="block">
				<el-pagination 
					@size-change="handleSizeChange" 
					@current-change="handleCurrentChange" 
					:current-page="parseInt(yema)" 
					:page-sizes="pageSizeOptions" 
					:page-size="parseInt(yetiao)" 
					:total="parseInt(tiaosum)" 
					layout="total, prev, pager, next, sizes,jumper">
				</el-pagination>
			</div>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	export default {
		data() {
			return {
				value6:'',								//日历
				add: false,
				show: true,
				tableData: [],          				//客户列表数据
				jiaojian:'',							//查询条件
				jiaojian2:'',							//高级查询条件
				dataBillstate:'',						//状态 
				section: '',
				deleto: '',
				
		        tiaosum: this.$store.state.page.recordCount,                       //所有条数
		        yema:this.$store.state.page.pageNo,				                     //当前页码
		        yetiao:this.$store.state.page.pageSize,				                 //每页条数
		        pageSizeOptions:this.$store.state.page.pageSizeOptions,       //每页显示条数选项
				
			}
		},
		methods: {
//分页
			handleSizeChange(val) {
				this.yetiao= `${val}`;
				this.axios({
					method: 'post',
					url: "/v3/basic/members/list",
					data:{
						"limit":this.yetiao,
						"offset":(this.yema-1)*this.yetiao
					}
				}).then((res) => {
					this.tableData = res.data.basicMemberViewVoList;
				}).catch((err)=>{
				    this.Public.openError(this,err.response.data)
			    });
			},
			handleCurrentChange(val) {
				this.yema=`${val}`;
				this.axios({
				method: 'post',
				url: "/v3/basic/members/list",
				params:{
					"limit":this.yetiao,
					"offset":(this.yema-1)*this.yetiao
				}
			}).then((res) => {
				this.tableData = res.data.basicMemberViewVoList;
			}).catch((err)=>{
			    this.Public.openError(this,err.response.data)
		    });
			},

			handleCommand() {
				this.jiaojian='';
				this.axios({                             
					method: 'post',
					url: "/v3/basic/members/list",
					data:{
						"gradeCode":this.gradeCode,
						"limit":this.yetiao,
						"offset":(this.yema-1)*this.yetiao
					}
				}).then((res) => {
					this.tableData = res.data.list;
					this.tiaosum =res.data.pageTools.recordCount;    //一共几条数据
					this.yetiao=res.data.pageTools.pageSize;			//每页显示多少条
        			this.pageSizeOptions = res.data.pageTools.pageSizeOptions ? res.data.pageTools.pageSizeOptions.split(",") : this.$store.state.page.pageSizeOptions;
				}).catch((err)=>{
				    this.Public.openError(this,err.response.data)
			    });
			},
			//条件查询
			Query(){
				this.axios({                             
					method: 'post',
					url: "/v3/basic/members/list",
					data:{
						"fullTextFields":this.jiaojian,
						"gradeCode":this.gradeCode,
						"limit":this.yetiao,
						"offset":(this.yema-1)*this.yetiao
					}
				}).then((res) => {
					this.tableData = res.data.list;
					this.tiaosum =res.data.pageTools.recordCount;    //一共几条数据
					this.yetiao=res.data.pageTools.pageSize;			//每页显示多少条
        			this.pageSizeOptions = res.data.pageTools.pageSizeOptions ? res.data.pageTools.pageSizeOptions.split(",") : this.$store.state.page.pageSizeOptions;
				}).catch((err)=>{
				    this.Public.openError(this,err.response.data)
			    });
					
			},
			
			//删除
			Delete(index, data) {
				this.$confirm('确认作废此用户？', '确认', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        cancelButtonClass:"fr",
			        confirmButtonClass:"fr",
			        customClass:"clearfixBox"
				}).then(() => {
					this.axios({
						method: 'delete',
						url: "/v3/basic/members/"+data[index].memberCode,
						data: {}
					}).then((res) => {
							this.axios({
								method: 'post',
								url: "/v3/basic/member/list",
								data:{
									"limit":this.yetiao,
									"offset":(this.yema-1)*this.yetiao
								}
							}).then((res) => {
								this.tableData = res.data.list;
								this.tiaosum =res.data.pageTools.recordCount; //一共几条数据
								this.yetiao=res.data.pageTools.pageSize;
        						this.pageSizeOptions = res.data.pageTools.pageSizeOptions ? res.data.pageTools.pageSizeOptions.split(",") : this.$store.state.page.pageSizeOptions;
							}).catch((err)=>{
							    this.Public.openError(this,err.response.data)
						    });
							 this.$notify({
					          message: '操作成功！',
					          type: 'success',
					          duration: 3000
					        });
					}).catch((err)=>{
					    this.Public.openError(this,err.response.data)
				    });

				}).catch(() => {});
			},
//			Oerror(){							//操作失败
//				this.$notify.error({
//		          	message: res.data.msg,
//		          	duration: 3000
//		        });
//			},
//			Osuccess(){							//操作成功
//				this.$notify({
//		          	message: '操作成功！',
//		          	type: 'success',
//		          	duration: 3000
//		        });
//			},
		addOk() {										//高级搜索
			if (this.radio2=='2') {
				this.radio2=''
			}
			this.axios({                             
				method: 'post',
				url: "/v3/basic/members/list",
				data:{
					"fullTextFields":this.jiaojian2,
					"gradeCode":this.gradeCode,
					"dataBillstate":this.radio2,
					"limit":this.yetiao,
					"offset":(this.yema-1)*this.yetiao
				}
			}).then((res) => {
				this.tableData = res.data.list;
				this.tiaosum =res.data.pageTools.recordCount;    //一共几条数据
				this.yetiao=res.data.pageTools.pageSize;			//每页显示多少条
        		this.pageSizeOptions = res.data.pageTools.pageSizeOptions ? res.data.pageTools.pageSizeOptions.split(",") : this.$store.state.page.pageSizeOptions;
			}).catch((err)=>{
			    this.Public.openError(this,err.response.data)
		    });
			this.add = !this.add;
		},
		
			//取消高级查询
			addCancel() {
				this.add = !this.add;
			},
		},
		mounted() {
			document.querySelector('body').onclick = () => {
				if(this.allOrder == true) {
					this.allOrder = false;
				}
			};
			//请求客户列表
			this.axios({
				method: 'post',
				url: "/v3/basic/members/list",
				data:{
					"limit":this.yetiao,
					"offset":(this.yema-1)*this.yetiao
				}
			}).then((res) => {
				this.tableData = res.data.list;
				this.tiaosum =res.data.pageTools.recordCount;    //一共几条数据
				this.yetiao=res.data.pageTools.pageSize;			//每页显示多少条
        		this.pageSizeOptions = res.data.pageTools.pageSizeOptions ? res.data.pageTools.pageSizeOptions.split(",") : this.$store.state.page.pageSizeOptions;
			}).catch((err)=>{
			    this.Public.openError(this,err.response.data)
		    });
//设置窗口高度
			var winHieg = document.documentElement.clientHeight;
			var cont = document.getElementById("content");
			cont.style.height = winHieg - 115 + "px";
			this.tableH = document.documentElement.clientHeight - 240;
		},
	}
</script>

<style scoped>
	@import "../../../assets/css/zijin.css";
	.location {
		padding: 3px 0 15px 0;
	}

	.content {
		background: #fff;
		padding: 15px;
		overflow-y: auto;
		font-family: "微软雅黑";
		position: relative;
	}

	.public-th {
		min-width: 750px;
		position: relative;
		z-index: 100;
	}

	.public-left {
		float: left;
	}

	.public-left a,
	.public-left span.search-openBtn {
		display: block;
		float: left;
		margin-right: 10px;
		padding-right: 0px;
		position: relative;
		height: 36px;
		line-height: 36px;
		z-index: 100;
		cursor: pointer;
	}

	.goods-input input {
		display: block;
		float: left;
		width: 280px;
		height: 34px;
		font-size: 12px;
		border: 0;
		margin-left: 20px;
	}

	

	.public-left a:hover {
		text-decoration: none;
	}

	.public-left a em {
		display: inline-block;
		position: relative;
		font-size: 14px;
	}

	



	.goods-input {
		float: left;
		width: 330px;
		border: 1px solid #cdd9e6;
		border-radius: 30px;
		margin-right: 10px;
		cursor: pointer;
	}

	.goods-input:hover {
		border-color: #13C19F;
		transition: 1s;
	}

	.goods-input i {
		cursor: pointer;
	}


	.table {
		margin-top: 15px;
	}

	.table th {
		height: 50px;
	}

	.el-table th>.cell {
		word-wrap: normal;
		text-overflow: ellipsis;
		line-height: 20px;
		width: 100%;
		box-sizing: border-box;
		font-weight: normal!important;
		font-size: 14px;
	}

	.el-table {
		font-size: 12px!important;
		font-weight: normal!important;
	}

	.block {
		float: right;
		margin: 15px;
	}

	.tab-hover {
		color: #b7c6d6;
		cursor: pointer;
	}

	.el-popover {
		min-width: 100px;
	}
	.pkehuName span{
		cursor: pointer;
	}
	
	.pkehuName span:hover{
		color: #03B8CC;
	}
	.p {
		text-indent: 10px;
		line-height: 30px;
	}

	.p em {
		position: relative;
		top: 2px;
		margin-right: 3px;
	}

	.p:hover {
		background: #eef1f9;
		color: #03B8CC;
	}




	.modal-backdrop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 80;
		background-color: rgba(240, 240, 240, 0.2);
	}

	.specific-search {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		padding: 30px;
		z-index: 1005;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0 0 10px #ccc;
	}

	.search-title {
		font-size: 16px;
		border: 0;
		color: #415161;
	}


	.search-btn {
		margin-top:40px;
	}


	.fade-enter-active,
	.fade-leave-active {
		transition: .4s;
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0;
	}

	.slideDown-enter-active,
	.slideDown-leave-active {
		transition: .4s;
	}

	.slideDown-enter,
	.slideDown-leave-active {
		height: 0;
		opacity: 0;
	}
	.fanhuitime{
		width: 350px;
		float: left;
	}
	.blocktime{
		margin: 0;
	}
	.gankua{
		margin: 20px;
	}
	.gankua span{
		margin-left: 5px;
		position: relative;
		top: -10px;
	}
	.gankua em{
		margin-left: 30px;
		position: relative;
		top: -9px;
		cursor: pointer;
	}
	.gankua em:hover{
		color: #13C19F;
	}
	img{
		display: inline-block;
	}
</style>
